<template>
  <div class="audit-records">
    <h3>审核记录</h3>

    <el-timeline class="audit-timeline">
      <el-timeline-item
        v-for="(record, index) in auditRecords"
        :key="index"
        :timestamp="record.time"
        placement="top"
        class="timeline-item"
      >
        <div class="timeline-content">
          <div class="user-content-wrapper">
          <div class="record-user">{{ record.user }}</div>
          <div class="record-content">{{ record.content || '无' }}</div>
          </div>
          <div :class="['record-status', record.status]">
            {{ record.status }}
          </div>
      </div>
      </el-timeline-item>  <!-- 现在标签能正确闭合 -->
    </el-timeline>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
// 引入 Element Plus 时间线组件（若全局引入可省略，局部引入需添加）
// import { ElTimeline, ElTimelineItem } from 'element-plus'

// 1. 定义「单个审核记录」的类型接口（和你传递的 auditRecords 结构完全匹配）
interface AuditRecord {
  time: string;       // 时间字段：字符串类型（如 '2025-08-05 22:17'）
  user: string;       // 审核人：字符串类型（如 'linlin'）
  content: string;    // 审核内容：字符串类型（允许空字符串 ''）
  status: '风险可忽略' | '确认有风险';  // 状态：只能是这两个固定值（限制无效值）
}

// 2. 用 TypeScript 泛型明确 props 类型：auditRecords 是 AuditRecord 类型的数组
defineProps<{
  auditRecords: AuditRecord[];  // 核心：指定数组元素为 AuditRecord 类型
}>()

</script>

<style lang="scss" scoped>
.audit-records {
  width: 100%;
  // 与父容器 padding 适配，避免贴边
  padding: 0 4px;
}

// 标题样式（保留原有）
h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

// 时间线容器样式（适配父容器宽度，避免过宽）
.audit-timeline {
  max-width: 100%;  // 继承父容器宽度（原示例的 600px 改为自适应）
}

// 时间线节点样式（控制节点间距、去掉默认卡片边框）
::v-deep(.el-timeline-item) {
  margin-bottom: 16px;  // 节点之间的间距（原 10px 优化为 16px，更符合时间线视觉）
  // 去掉时间线节点默认的边框和背景，用自定义内容区样式
  ::v-deep(.el-timeline-item__content) {
    padding: 0;
    margin-left: 8px;  // 与时间线竖线的间距
  }
  // 时间戳样式（继承原有 record-time 风格）
  ::v-deep(.el-timeline-item__timestamp) {
    color: #999;
    font-size: 12px;
    margin-bottom: 4px;  // 时间与内容的间距
  }
}

// 时间线节点内部内容区（改为 Flex 布局，控制横向并列）
.timeline-content {
  padding: 12px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: #eef1f7;
  display: flex; // 开启 Flex 布局，让子元素横向排列
  justify-content: space-between; // 子元素两端对齐（左：user-content-wrapper，右：record-status）
  align-items: flex-start; // 垂直顶部对齐（避免 status 因高度不同下沉）
  gap: 12px; // 左右两部分的间距，避免挤在一起
}

// 新增：包裹 record-user + record-content，实现垂直排列
.user-content-wrapper {
  display: flex;
  flex-direction: column; // 子元素垂直排列（user 在 top，content 在 bottom）
  gap: 4px; // user 与 content 之间的垂直间距（可根据需求调整）
}

// 审核人（保留原有加粗，取消底部间距，改为在 wrapper 内控制）
.record-user {
  font-weight: bold;
  color: #333;
  // 移除 margin-bottom，改为在 wrapper 内用 gap 控制与 content 的间距
}

// 审核内容（保留原有样式，间距由 wrapper 控制）
.record-content {
  color: #666;
  font-size: 14px;
}

// 审核状态（保留原有颜色，微调对齐）
.record-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  // 可选：给 status 加一个最小宽度，避免不同状态文字长度不一导致错位
  min-width: 80px;
  text-align: center;
}

// 状态颜色（复用原有逻辑）
.风险可忽略 {
  background-color: #e1f3d8;
  color: #67c23a;
}
.确认有风险 {
  background-color: azure;
  color: #f56c6c;
}

// 最后一个节点取消底部间距
::v-deep(.el-timeline-item:last-child) {
  margin-bottom: 0;
}
</style>
